<template>
    <div class="SearchContent">
        <!-- 顶部搜索导航栏 -->
        <div class="search_Big_Box">
            <div class="search_Box">
                <div class="search_Back">
                    <span @click="$router.go(-1)" class="iconfont icon-zuojiantou"></span>
                </div>
                <div class="search_Input">
                    <input type="text" placeholder="热播大电影《美人江湖》原著!" v-model="value" @keydown.enter="searchBtn">
                    <span class="iconfont icon-sousuo SS"></span>
                    <span class="iconfont icon-guanbi GB" v-show="value != ''" @click="value = ''"></span>
                </div>
                <div class="search_Btn" @click="searchBtn">
                    <span>搜索</span>
                </div>
            </div>
        </div>
        <!-- 搜索页面默认地址 -->
        <div v-show="!boxShow">
            <div class="search_Hot">
                <div class="SearchContainer">
                    <div class="SAll_Title">
                        <span>热门搜索</span>
                    </div>
                    <div class="SH_Content">
                        <router-link v-for="item in hotlist.slice(0,2)" :key="item.id" :to="'/TheWorkDetails?id='+item.id" tag="div" class="SHC_Box optFor">
                            <span class="iconfont icon-remen"></span>
                            <span>{{item.name}}</span>
                        </router-link>
                        <router-link tag="div" class="SHC_Box"  v-for="item in hotlist.slice(2,5)" :key="item.id" :to="'/TheWorkDetails?id='+item.id">
                            <span>{{item.name}}</span>
                        </router-link>
                        <router-link class="SHC_Box" tag="div" to="/bookClassify/bookClassify">
                            <span>更多分类<span class="iconfont icon-youjiantou1"></span></span>
                        </router-link>
                    </div>
                </div>
            </div>
            <div class="search_HotBook">
                <div class="search_HotBook">
                    <div class="SearchContainer">
                        <div class="SAll_Title">
                            <span>热搜书籍</span>
                        </div>
                    </div>
                    <router-link class="searchListBox"  v-for="item in bookInfolist " :key="item.bookId" tag="div" :to="'/TheWorkDetails?id='+item.bookId">
                        <div class="searchList">
                            <div class="MRL_Content">
                                <div class="upperPart">
                                    <div class="MRLC_Img">
                                        <img :src="item.cover" alt="">
                                    </div>
                                    <div class="MRLC_Text">
                                        <p class="MRLCT_name">{{item.title}}</p>
                                        <p class="MRLCT_Tag">杀伐果断·连载·841万字</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </router-link>
                </div>
                <div class="search_bottom">
                    <p class="bigText">免费看书100年</p>
                    <p>七猫免费小说</p>
                </div>
            </div>
        </div>
        <!-- 搜索按钮按下出现的页面 -->
        <div v-show="boxShow">
            <!-- 作者 -->
            <!-- <div class="search_Enter_writer">
                <div class="SEW_Box">
                    <div class="SearchContainer">
                        <div class="SEWB_Content">
                            <div class="SEWBC_Img">
                                <img src="" alt="">
                            </div>
                            <div class="SEWBC_Text">
                                <div class="SEWBCT_writer">
                                    <span class="SEWBCTW_name">月茶</span>
                                    <span class="SEWBCTW_tag">
                                        <span>作者</span>
                                    </span>
                                </div>
                                <div class="SEWBCT_introduce">
                                    <span>作品: 《冷面弟弟惹不得》《将军夫人惹不得》</span>
                                </div>
                            </div>
                            <router-link tag="div" class="SEWBCT_Enter" to="/writerPage">
                                <span class="iconfont icon-youjiantou1"></span>
                            </router-link>
                        </div>
                    </div>
                </div>
            </div> -->
            <!-- 搜索内容 -->
            <div class="search_EnterBox">
                <div class="SearchContainer">
                    <router-link class="SEB_Content" v-for="item in searchList" :key="item.id" tag="div" :to="'/TheWorkDetails?id='+item.id">
                        <div class="SEBC_Img">
                            <img :src="item.cover" alt="">
                        </div>
                        <div class="SEBC_Text">
                            <p class="SEBCT_name">{{item.text}}</p>
                            <p class="SEBCT_writer">{{item.author}}</p>
                            <p class="SEBCT_introduce">{{item.d}}</p>
                            <p class="SEBCT_tag">文学艺术·歌词歌赋·完结·5万字</p>
                        </div>
                    </router-link>
                </div>
            </div>
            <!-- 底部 -->
            <div class="search_bottom">
                <p class="bigText">免费看书100年</p>
                <p>七猫免费小说</p>
            </div>
        </div>
        <!-- <searchHaveInHand></searchHaveInHand> -->
        <!-- <searchEnterValue v-show="false"></searchEnterValue> -->
    </div>
</template>

<script>
import {getSearchGetHotWords,getSearchSearchHint} from "../../api/search";
import { getBookInfo } from  "../../api/TheWorkDetails";
export default {
    data(){
        return{
            value:"",
            hotlist:[],
            bookInfolist:[],
            boxShow:false,
            searchList:[],
        }
    },
    methods:{
        // 搜索按钮
        searchBtn(){
            if(this.value==""){
                this.boxShow = false;
            }else{
                this.boxShow = true;
            }
            this.getSearchSearchHintFun()
        },
        // 获取书籍图片
        getCover(){
            for(let i = 0 ; i < this.hotlist.length ; i++){
                this.getBookInfoFun(this.hotlist[i].id);
            }
        },
        // 书籍简单详情
        getBookInfoFun(id){
            getBookInfo({sourceUuid:id}).then(data=>{
                this.bookInfolist.push(data.data.book)
                console.log("书籍简单详情",this.bookInfolist)
            })  
        },
        // 搜索接口
        getSearchSearchHintFun(){
            getSearchSearchHint({search:this.value}).then(data=>{
                this.searchList = data.words.w
                console.log("搜索接口",this.searchList)
            })
        },
        // 热门搜索
        getSearchGetHotWordsFun(){
            getSearchGetHotWords().then(data=>{
                console.log("热门搜索",data)
                this.hotlist = data.list;
                this.getCover();
            })
        },
    },
    beforeCreate(){
        window.document.body.style.backgroundColor = '#fff';
    },
    created(){
        this.getSearchGetHotWordsFun();
    },
    beforeDestroy(){
        window.document.body.style.backgroundColor = '#f5f5f5';
    }
}
</script>

<style lang="less">
body{
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.SearchContent{
    padding-top: 50px;
}
.SearchContainer{
    width: 91%;
    margin: 0px auto;
}
.SAll_Title{
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0px;
}
.search_Big_Box{
    width: 100%;
    position:fixed;
    top: 0px;
    left: 0px;
    z-index: 5;
    .search_Box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        background-color: #ffda33;
        .search_Back{
            width: 15%;
            text-align: center;
            span{
                font-size: 24px;
                font-weight: bold;
                color: #333;
            }
        }
        .search_Input{
            width: 68%;
            position: relative;
            padding: 8px 35px;
            padding-right: 30px;
            background: white;
            border-radius: 5px;
            input{
                width: 100%;
                height: 24px;
                border: none;
            }
            ::-webkit-input-placeholder{
                color: #ccc;
                font-size: 14px;
            }
            span.SS{
                left: 12px;
                top: 12px;
                position: absolute;
                color: #ccc;
            }
            span.GB{
                position: absolute;
                right: 3%;
                top: 12px;
                color: #ccc;
            }
        }
        .search_Btn{
            width: 17%;
            text-align: center;
            span{
                color: #333;
                font-weight: bold;
            }
        }
    }
}

.search_Hot{
    .SH_Content{
        display: flex;
        flex-wrap: wrap;
        .SHC_Box.optFor{
            display: flex;
            align-items: center;
            background-color: #faf1ec;
            padding: 5px 10px;
            border-radius: 20px;
            span.icon-remen{
                color: #fe6643;
                font-size: 18px;
                margin-right: 2px;
            }
            span{
                font-size: 13px;
                color: #fe6643;
            }
        }
        .SHC_Box{
            background-color: #f5f6f8;
            padding: 5px 10px;
            border-radius: 20px;
            margin-right: 10px;
            font-weight: bold;
            margin-bottom: 10px;
            span{
                font-size: 13px;
                color: #333;
            }
        }
    }
}
.search_HotBook{
    .searchListBox{
        .searchList{
            display: flex;
            // align-items: center;
            position: relative;
            .MRL_ranking{
                position: absolute;
                top: -8px;
                left: 20px;
                line-height: 90px;
                width: 10%;
                z-index: 2;
                span{
                    background-color: #fee450;
                    font-weight: bold;
                    padding: 2px 6px;
                    border-radius: 50%;
                }
            }
            .MRL_Content{
                width: 90%;
                padding: 10px 0px;
                padding-left: 20px;
                .upperPart{
                    display: flex;
                    position: relative;
                    margin-bottom: 10px;
                    .MRLC_Img{
                        width: 50px;
                        height: 63px;
                        background-color: pink;
                        margin-right: 10px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .MRLC_Text{
                        padding-top: 5px;
                        line-height: 23px;
                        .MRLCT_name{
                            font-size: 18px;
                            font-weight: bold;
                        }
                        .MRLCT_Tag{
                            color: #aaa;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
}
.search_bottom{
    background-color: #fff;
    text-align: center;
    color: #eaeaea;
    padding-top: 30px;
    padding-bottom: 50px;
    .bigText{
        font-size: 22px;
        font-weight: bold;
    }
}
    
.SearchContainer{
    width: 91%;
    margin: 0px auto;
}
.search_Enter_writer{
    border-bottom:10px solid #eee;
    .SEW_Box{
        .SEWB_Content{
            display: flex;
            align-items: center;
            padding: 10px 0px;
            justify-content: space-between;
            .SEWBC_Img{
                width: 50px;
                height: 50px;
                background-color: pink;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 10px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .SEWBC_Text{
                width: 75%;
                .SEWBCT_writer{
                    display: flex;
                    align-items: center;
                    .SEWBCTW_name{
                        font-weight: bold;
                        margin-right: 10px;
                    }
                    .SEWBCTW_tag{
                        span{
                            font-size: 12px;
                            padding: 2px 4px;
                            background-color: #fdcd0b;
                            border-radius: 5px;
                        }
                    }
                }
                .SEWBCT_introduce{
                    margin-top: 6px;
                    span{
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        overflow: hidden;
                        color: #aaa;
                        font-size: 14px;
                    }
                }
            }
            .SEWBCT_Enter{
                span{
                    color: #ccc;
                }
            }
        }
    }
}
.search_EnterBox{
    .SEB_Content{
        display: flex;
        padding: 10px 0px;
        padding-top: 20px;
        .SEBC_Img{
            width: 70px;
            height: 90px;
            background-color: aqua;
            margin-right: 15px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .SEBC_Text{
            width: 75%;
            p{
                line-height: 22px;
                letter-spacing: 0.5px;
            }
            p.SEBCT_name{
                font-weight: bold;
                line-height: 32px;
            }
            p.SEBCT_writer{
                font-size: 14px;
                color: #aaa;
            }
            p.SEBCT_introduce{
                width: 100%;
                font-size: 14px;
                color: #aaa;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
            p.SEBCT_tag{
                font-size: 14px;
                color: #aaa;
            }
        }
    }
}
.search_bottom{
    background-color: #fff;
    text-align: center;
    color: #eaeaea;
    padding-top: 30px;
    padding-bottom: 50px;
    .bigText{
        font-size: 22px;
        font-weight: bold;
    }
}
</style>